<template>
  <header class="header-top">
    <p class="logo">光谷智慧交通管理系统</p>
    <!-- 中间的导航下拉 -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#fff"
      text-color="#202124"
      active-text-color="#0381fe"
    >
      <el-sub-menu index="1">
        <template #title>地图切换</template>
        <el-menu-item index="1-1" @click="toggleMap(map, '1-1')"
          >矢量地图(默认)</el-menu-item
        >
        <el-menu-item index="1-2" @click="toggleMap(map, '1-2')"
          >影像地图</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>实时路况</template>
        <el-menu-item index="2-1" @click="ShowRoad(map)">显示路况</el-menu-item>
        <el-menu-item index="2-2" @click="dialogVisible = true"
          >报告路况</el-menu-item
        >
        <el-menu-item index="2-3" @click="hideRoad(R_source, R_layer, shape)"
          >关闭路况</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>事故多发地</template>
        <el-menu-item index="3-1" @click="toggleHotMap(map, '3-1')"
          >显示热力图</el-menu-item
        >
        <el-menu-item index="3-2" @click="toggleHotMap(map, '3-2')"
          >关闭热力图</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>工具箱</template>
        <el-menu-item
          index="4-1"
          @click="handleMeasure(map, l_source, 'length')"
          >测量距离</el-menu-item
        >
        <el-menu-item index="4-2" @click="handleMeasure(map, l_source, 'area')"
          >测量面积</el-menu-item
        >
        <el-menu-item index="4-3" @click="handleMeasure(map, l_source, 'close')"
          >关闭测量</el-menu-item
        >
        <el-menu-item index="4-4" @click="handleMeasure(map, l_source, 'photo')"
          >导出图片</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>查处公告</template>
        <el-menu-item index="5-1" @click="addAnnouncement(map)"
          >发布公告</el-menu-item
        >
        <el-menu-item
          index="5-2"
          @click="getAnnouncement"
          v-if="UserStore.userType != 'common'"
          >删除公告</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>事件管理</template>
        <el-menu-item index="6-1" @click="reEvent(map)">审核事件</el-menu-item>
        <el-menu-item index="6-2" @click="stopReEvent(map)"
          >关闭审核</el-menu-item
        >
        <el-menu-item index="6-3" @click="addEvent(map)">添加事件</el-menu-item>
        <el-menu-item index="6-4" @click="stopAddEvent(map)"
          >关闭添加</el-menu-item
        >
        <el-menu-item index="6-5" @click="queryEvent(map)"
          >查询事件</el-menu-item
        >
        <el-menu-item index="6-6" @click="stopSearch(map)"
          >关闭查询</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="7">
        <template #title>实时监控</template>
        <el-menu-item index="7-1" @click="OpenVideo(map)"
          >开启监控</el-menu-item
        >
        <el-menu-item
          index="7-2"
          @click="CloseVideo(sourceCamera, layerCamera, key, map)"
          >关闭监控</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
    <!-- 输入框 -->
    <el-input
      placeholder="请输入关键字进行查询"
      class="input-with-select"
      v-model="searchText"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch(map)" />
      </template>
    </el-input>
    <!-- 头像区域 -->
    <div class="demo-basic--circle">
      <el-dropdown>
        <!-- 头像 -->
        <span class="el-dropdown-link">
          <el-avatar> user </el-avatar>
        </span>
        <!-- 下拉列表 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              @click="handleManage"
              v-if="UserStore.userType == 'admin'"
              >管理用户</el-dropdown-item
            >
            <el-dropdown-item @click="handleUpdatePassword"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item divided @click="getQuitLogin"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 点击发布公告 -->
    <el-dialog
      v-model="addVisible"
      title="发布公告"
      :close-on-click-modal="false"
      class="add-Announ"
    >
      <div style="font-size: 18px; margin: 5px 10px">
        发布公告区域与物业电话
      </div>
      <el-table
        :data="data.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        border
        stripe
      >
        <el-table-column prop="name" label="区域名称"></el-table-column>
        <el-table-column prop="tel" label="物业电话"></el-table-column>
      </el-table>
      <!-- 物业信息分页 -->
      <el-pagination
        class="add-Announ-pagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1, 2, 4, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.length"
        @size-change="handleAddSizeChange"
        @current-change="handleAddCurrentChange"
      />
      <div style="font-size: 15px; margin: 5px 1px">公告信息:</div>
      <el-input
        type="textarea"
        placeholder="请输入需要发布的公告信息"
        class="add-Announ-input"
        :rows="3"
        v-model="noticevalue"
      ></el-input>
      <div class="add-Announ-button">
        <el-button @click="handleRemove(map)">取消</el-button>
        <el-button type="primary" @click="handlePublish(map)">发布</el-button>
      </div>
    </el-dialog>
    <!-- 点击删除公告框列表 -->
    <el-dialog
      v-model="ViewAnnouncements"
      title="公告页"
      :close-on-click-modal="false"
    >
      <div>
        <input
          class="notice-input"
          placeholder="请输入关键字"
          v-model.trim="noticeSearch"
        />
        <button class="notice-button notice-search" @click="doFilter">
          搜索
        </button>
        <button class="notice-button notice-reset" @click="flushed">
          重置
        </button>
      </div>

      <el-table :data="notices" border stripe>
        <el-table-column
          label="序号"
          property="notice_id"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="公告内容"
          property="notice_content"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          label="时间"
          property="notice_time"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template v-slot="Scoped">
            <el-button
              type="primary"
              @click="handleDeleteView(Scoped.row.notice_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="isShow"
        v-model:current-page="page"
        v-model:page-size="size"
        :page-sizes="[1, 2, 4, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </header>
  <!-- 报告路况的 dialog -->
  <el-dialog
    v-model="dialogVisible"
    title="报告路况"
    width="40%"
    draggable
    center
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="120px"
      status-icon
    >
      <el-form-item label="事件类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择事件类型">
          <el-option label="碰撞" value="碰撞" />
          <el-option label="剐蹭" value="剐蹭" />
          <el-option label="失火" value="失火" />
          <el-option label="翻车" value="翻车" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="事发地址" prop="address">
        <el-input
          v-model="ruleForm.address"
          placeholder="请输入路况地址，如关山大道"
        />
      </el-form-item>
      <el-form-item label="建筑标识" prop="sign">
        <el-input
          v-model="ruleForm.sign"
          placeholder="请输入建筑标识，如老北京烤鸭对面"
        />
      </el-form-item>
      <el-form-item label="发生时间" prop="time">
        <el-date-picker
          v-model="ruleForm.time"
          type="datetime"
          placeholder="请选择发生日期和时间"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="事件描述" prop="desc">
        <el-input
          v-model="ruleForm.desc"
          type="textarea"
          style="width: 300px"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef, ruleForm)"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 修改密码 -->
  <el-dialog
    v-model="userUpdatePassword"
    title="修改密码"
    :close-on-click-modal="false"
    width="400px"
  >
    <el-form
      class="password-form"
      ref="loginFormUpdate"
      :model="userPassword"
      :rules="userPasswordRules"
      label-width="100px"
    >
      <el-form-item label="用户名">
        <el-input
          placeholder="请输入用户名"
          v-model="userPassword.username"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="原密码">
        <el-input
          placeholder="请输入原密码"
          v-model="userPassword.password"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="newpassword" label="新密码">
        <el-input
          placeholder="请输入新密码"
          v-model="userPassword.newpassword"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="confirmnewpassword" label="确认密码">
        <el-input
          placeholder="再次确认密码"
          v-model="userPassword.confirmnewpassword"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitUpdate">修改密码</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- popup弹窗 -->
  <div id="mapCon">
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>

  <!-- ⭐设置Popup的结构 -->
  <div id="S_popup" class="S_ol-popup" v-show="isShowPopup">
    <h5>事件详细信息</h5>
    <a href="#" id="S_popup-closer" class="S_ol-popup-closer"></a>
    <div id="S_popup-content">
      <table border>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>事件编号</td>
          <td>{{ searchData.事件编号 }}</td>
        </tr>
        <tr>
          <td>事件类型</td>
          <td>{{ searchData.事件类型 }}</td>
        </tr>
        <tr>
          <td>事件等级</td>
          <td>{{ searchData.事件等级 }}</td>
        </tr>

        <tr>
          <td>发生地点</td>
          <td>{{ searchData.发生地点 }}</td>
        </tr>
        <tr>
          <td>发生时间</td>
          <td>{{ searchData.发生时间 }}</td>
        </tr>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>车牌号</td>
          <td>{{ searchData.车牌号 }}</td>
        </tr>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>驾驶员</td>
          <td>{{ searchData.驾驶员 }}</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- 目录树组件 -->
  <directory-tree></directory-tree>

  <!-- 审核事件(修改事件) -->
  <el-dialog
    title="事件更新"
    v-model="dialogVisible2"
    width="30%"
    :before-close="handleClose2"
  >
    <el-form
      :model="formEvent"
      :rules="eventRules"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="事件编号" prop="SJid">
        <el-input v-model="formEvent.SJid"></el-input>
      </el-form-item>
      <el-form-item label="事件类型" prop="type">
        <el-select v-model="formEvent.type" placeholder="请选择事件类型">
          <el-option label="碰撞" value="碰撞"></el-option>
          <el-option label="刮擦" value="刮擦"></el-option>
          <el-option label="失火" value="失火"></el-option>
          <el-option label="翻车" value="翻车"></el-option>
          <el-option label="碾压" value="碾压"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事件等级" prop="level">
        <el-select v-model="formEvent.level" placeholder="请选择事件等级">
          <el-option label="轻微事故" value="0"></el-option>
          <el-option label="一般事故" value="1"></el-option>
          <el-option label="重大事故" value="2"></el-option>
          <el-option label="特大事故" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" prop="datetime">
        <el-date-picker
          v-model="formEvent.datetime"
          value-format="YYYY.M.d H:m:s"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="事件地址" prop="address">
        <el-input v-model="formEvent.address"></el-input>
      </el-form-item>
      <el-form-item label="车辆牌号" prop="number">
        <el-input v-model="formEvent.number"></el-input>
      </el-form-item>
      <el-form-item label="司机名字" prop="user">
        <el-input v-model="formEvent.user"></el-input>
      </el-form-item>
      <el-form-item label="审核状态" prop="level">
        <el-select v-model="formEvent.statu" placeholder="请选择审核状态">
          <el-option label="待处理" value="0"></el-option>
          <el-option label="处理中" value="1"></el-option>
          <el-option label="已归档" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click.stop="cancelUpdate">取 消</el-button>
        <el-button type="primary" @click="submit()"> 确 定 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 添加事件 -->
  <el-dialog title="事件更新" v-model="dialogVisible3" width="30%">
    <el-form
      :model="addEventForm"
      :rules="eventRule"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="事件编号" prop="SJid">
        <el-input v-model="addEventForm.SJid"></el-input>
      </el-form-item>
      <el-form-item label="事件类型" prop="type">
        <el-select v-model="addEventForm.type" placeholder="请选择事件类型">
          <el-option label="碰撞" value="碰撞"></el-option>
          <el-option label="刮擦" value="刮擦"></el-option>
          <el-option label="失火" value="失火"></el-option>
          <el-option label="翻车" value="翻车"></el-option>
          <el-option label="碾压" value="碾压"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事件等级" prop="level">
        <el-select v-model="addEventForm.level" placeholder="请选择事件等级">
          <el-option label="轻微事故" value="0"></el-option>
          <el-option label="一般事故" value="1"></el-option>
          <el-option label="重大事故" value="2"></el-option>
          <el-option label="特大事故" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" prop="datetime">
        <el-date-picker
          v-model="addEventForm.datetime"
          value-format="YYYY.M.d H:m:s"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="事件地址" prop="address">
        <el-input v-model="addEventForm.address"></el-input>
      </el-form-item>
      <el-form-item label="车辆牌号" prop="number">
        <el-input v-model="addEventForm.number"></el-input>
      </el-form-item>
      <el-form-item label="司机名字" prop="user">
        <el-input v-model="addEventForm.user"></el-input>
      </el-form-item>
      <el-form-item label="审核状态" prop="level">
        <el-select v-model="addEventForm.statu" placeholder="请选择审核状态">
          <el-option label="待处理" value="0"></el-option>
          <el-option label="处理中" value="1"></el-option>
          <el-option label="已归档" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click.stop="cancelUpdate">取 消</el-button>
        <el-button type="primary" @click="addPoint1(lnglat[0], lnglat[1])">
          确 定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 查询事件 -->
  <el-dialog
    v-model="dialogVisible1"
    title="查询事件"
    width="60%"
    :before-close="handleClose1"
  >
    <!-- 查询列表 -->
    <el-table :data="queryEventData" class="table-content">
      <el-table-column prop="cartNum" label="事件编号" />
      <el-table-column prop="driver" label="驾驶员" />
      <el-table-column prop="eventLevel" label="事件等级" />
      <el-table-column prop="eventNum" label="车牌号" />
      <el-table-column prop="eventPlace" label="发生地点" />
      <el-table-column prop="eventTime" label="发生时间" />
      <el-table-column prop="eventType" label="事件类型" />
      <el-table-column prop="sloveState" label="处理状态" />
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 导入目录树组件
import DirectoryTree from './DirectoryTree.vue'
// 导入 element 的图标库
import { Search } from '@element-plus/icons-vue'
// 导入 initMap.js -------------------------------------- 初始化地图
import { map, l_source } from '@/Hooks/initMap.js'
// 导入 workBox.js -------------------------------------- 工具箱的功能
import { handleMeasure } from '@/Hooks/workBox.js'
// 导入 toggleMap.js ------------------------------------ 切换地图的功能
import { toggleMap } from '@/Hooks/toggleMap.js'
// 导入 toggleHotMap.js --------------------------------- 切换事故多发地的功能（热力图）
import { toggleHotMap } from '@/Hooks/toggleHotMap.js'
// 导入 showRoad.js ------------------------------------- 显示路况
import {
  ShowRoad,
  hideRoad,
  R_source,
  R_layer,
  shape
} from '@/Hooks/showRoad.js'

// 导入 showRoad.js -------------------------------------- 报告路况的Dialog
import {
  dialogVisible,
  ruleFormRef,
  rules,
  ruleForm,
  handleSubmit,
  handleCancel
} from '@/Hooks/showDialog.js'

// 导入 showVideo.js ------------------------------------- 实时监控
import {
  OpenVideo,
  CloseVideo,
  sourceCamera,
  layerCamera,
  key
} from '@/Hooks/showVideo.js'
// 导入 Announcement.js ---------------------------------- 发布公告
import { Announcement } from './Hooks/Announcement'
//存储登录时候的id,用户名和用户等级
import { useUserStore } from '../../src/stores/useUserStore'
//导入退出登录的hooks
import { quitLogin } from './Hooks/quitLogin'
//导入修改密码的hooks
import { updatePassword } from './Hooks/updatePassword.js'
//导入发布公告的hooks
import { useAnnouncement } from './Hooks/useAnnouncement'

// 导入 typeSearch.js ----------------------------------- 搜索框搜索事件
import {
  searchText,
  data as searchData,
  isShowPopup,
  handleSearch
} from '@/Hooks/typeSearch.js'

// 导入 router 路由
import { useRouter } from 'vue-router'

const route = useRouter()

const UserStore = useUserStore()

// 跳转到管理用户界面
const handleManage = () => {
  route.push('/manage')
}
// 点击退出登录
const { getQuitLogin } = quitLogin()
// 查看公告hooks
const {
  ViewAnnouncements, //控制公告数据列表弹框的显示和隐藏
  notices, //公告总数据
  getAnnouncement, //点击查看公告发送请求拿到公告数据
  ViewAnnouncement, //控制公告数据详情的显示和隐藏
  notice, //公告详情
  page, //分页器当前页数
  size, //每页显示的记录条数
  total, //总数据个数
  handleSizeChange, //根据每页显示记录的条数更新数据
  handleCurrentChange, //根据根据分页器当前页数更新数据
  handleView, //点击查看公告详情
  handleDeleteView, //点击删除公告
  handleClose, //关闭详情页,打开公告页
  noticeSearch, //接收input输入框的内容
  doFilter, //实现搜索功能
  isShow, //控制分页器的显示和隐藏
  flushed //重置表格
} = Announcement()

// 点击修改密码
const {
  handleUpdatePassword, //点击修改弹框状态
  userUpdatePassword, //弹框状态
  userPassword, //接收input内容
  userPasswordRules, //表单验证规则
  submitUpdate, //点击确认修改
  loginFormUpdate //表单验证
} = updatePassword()

// 导入发布公告hooks
const {
  addAnnouncement,
  addVisible,
  data,
  pageSize,
  currentPage,
  handleAddSizeChange,
  handleAddCurrentChange,
  handlePublish,
  noticevalue,
  handleRemove
} = useAnnouncement()

// ------------审核事件-------------------------------------------------
var sourceResEvent
var layerResEvent
var key1
var resultPoint //存储修改点要素的OID
// 编辑表单
var lnglat1
var keyUpdata
const dialogVisible2 = ref(false)
const formEvent = reactive({
  SJid: '',
  type: '',
  level: '',
  datetime: '',
  address: '',
  number: '',
  user: '',
  statu: ''
})
// 表单校验规则
const eventRules = reactive({
  SJid: [
    { required: true, message: '请输入编号', trigger: 'blur' },
    {
      message: '请输入编号',
      trigger: 'blur'
    }
  ],
  type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
  level: [
    {
      required: true,
      message: '请选择事件等级',
      trigger: 'change'
    }
  ],
  address: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
  datetime: [
    {
      // validator: checkTime,
      required: true,
      message: '请选择日期',
      trigger: 'change'
    }
  ],
  number: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
  user: [{ required: true, message: '请填写驾驶员名字', trigger: 'blur' }]
})
function reEvent(map) {
  keyUpdata = map.on('click', function (e) {
    lnglat1 = e.coordinate
    queryByPnt(e.coordinate[0], e.coordinate[1])
  })
  var queryByPnt = function (x, y) {
    //设置查询点为鼠标点击点
    var pointObj = new Zondy.Object.Point2D(x, y)
    //查询点半径
    pointObj.nearDis = 0.001
    //初始化查询结构对象，设置查询结构包含几何信息
    var queryStruct = new Zondy.Service.QueryFeatureStruct()
    //是否包含几何图形信息
    queryStruct.IncludeGeometry = true
    //是否包含属性信息
    queryStruct.IncludeAttribute = true
    //是否包含图形显示参数
    queryStruct.IncludeWebGraphic = false
    //指定查询规则
    var rule = new Zondy.Service.QueryFeatureRule({
      //是否将要素的可见性计算在内
      EnableDisplayCondition: false,
      //是否完全包含
      MustInside: false,
      //是否仅比较要素的外包矩形
      CompareRectOnly: false,
      //是否相交
      Intersect: true
    })
    //实例化查询参数对象
    var queryParam = new Zondy.Service.QueryParameter({
      r: Math.random(),
      geometry: pointObj,
      resultFormat: 'json',
      struct: queryStruct,
      rule: rule
    })
    //设置查询分页号
    queryParam.pageIndex = 0
    //设置查询要素数目
    queryParam.recordNumber = 20
    //实例化地图文档查询服务对象
    var queryService = new Zondy.Service.QueryDocFeature(
      queryParam,
      'guanggu',
      2,
      {
        ip: 'localhost',
        port: '6163' //访问IGServer的端口号，.net版为6163，Java版为8089
      }
    )
    //执行查询操作，querySuccess为查询回调函数
    queryService.query(querySuccess, queryError)
  }
  //查询成功回调
  function querySuccess(result) {
    resultPoint = result
    console.log(result)
    var arr = result.SFEleArray[0].AttValue.slice(0, 8)
    console.log(arr)
    formEvent.SJid = arr[0]
    formEvent.type = arr[1]
    formEvent.level = arr[2]
    formEvent.datetime = arr[3]
    formEvent.address = arr[4]
    formEvent.number = arr[5]
    formEvent.user = arr[6]
    formEvent.statu = arr[7]
    dialogVisible2.value = true
  }
  //查询失败回调
  function queryError(e) {
    alert('查询失败')
  }
}

function handleClose2() {
  dialogVisible2.value = false
}

function submit() {
  dialogVisible2.value = false
  //设置添加点要素的图形参数信息
  //设置当前点要素的几何信息
  var gpoint = new Zondy.Object.GPoint(lnglat1[0], lnglat1[1])
  var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] })
  const Point_Style = {
    Angle: 0,
    Color: 6,
    Space: 0,
    SymHeight: 5,
    SymID: 21,
    SymWidth: 5
  }
  var pointInfo = this.addPointStyle(formEvent.statu) //判断状态赋予不同的样式
  var graphicInfo = new Zondy.Object.WebGraphicsInfo({
    InfoType: 1,
    PntInfo: pointInfo
  })
  resultPoint.SFEleArray[0].graphicInfo = graphicInfo
  var update_Value = []
  for (var value in formEvent) {
    update_Value.push(formEvent[value])
  }
  var attValue = update_Value
  //创建一个要素
  var newfeature = new Zondy.Object.Feature({
    fGeom: fGeom,
    GraphicInfo: graphicInfo,
    AttValue: attValue
  })
  //设置要素为点要素
  newfeature.setFType(1)
  // *************************更新
  newfeature.setFID(resultPoint.SFEleArray[0].FID)
  //创建一个要素数据集
  var featureSet = new Zondy.Object.FeatureSet()
  featureSet.clear()
  //设置属性结构
  var cAttStruct = new Zondy.Object.CAttStruct({
    FldName: [
      '事件编号',
      '事件类型',
      '事件等级',
      '发生时间',
      '发生地点',
      '车牌号',
      '驾驶员',
      '处理状态'
    ],
    FldNumber: 8,
    FldType: [
      'string',
      'string',
      'int',
      'string',
      'string',
      'string',
      'string',
      'int'
    ]
  })
  featureSet.AttStruct = cAttStruct
  // console.log(featureSet);
  //添加要素到要素数据集
  featureSet.addFeature(newfeature)
  var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
    ip: 'localhost',
    port: '6163' //访问IGServer的端口号，.net版为6163，Java版为8089
  })
  //执行添加点要素功能
  editService.update(featureSet, onPntSuccess)
  //添加点要素回调函数
  function onPntSuccess(data) {
    if (data.succeed) {
      alert('更改成功')
    } else {
    }
  }
}

function stopReEvent(map) {
  ol.Observable.unByKey(keyUpdata)
}

// ------------添加事件-------------------------------------------------
const dialogVisible3 = ref(false)
var sourceAdd
var layerAdd
var lnglat
var attr
var serviceAdd
var docLayerAdd
// var editService;
var featureSetAdd
//设置属性结构
var cAttStruct
var draw
var keyAdd
const eventRule = reactive({
  SJid: [
    { required: true, message: '请输入编号', trigger: 'blur' },
    {
      message: '请输入编号',
      trigger: 'blur'
    }
  ],
  type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
  level: [
    {
      required: true,
      message: '请选择事件等级',
      trigger: 'change'
    }
  ],
  address: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
  datetime: [
    {
      // validator: checkTime,
      required: true,
      message: '请选择日期',
      trigger: 'change'
    }
  ],
  number: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
  user: [{ required: true, message: '请填写驾驶员名字', trigger: 'blur' }]
})
const addEventForm = reactive({
  SJid: '',
  type: '',
  level: '',
  datetime: '',
  address: '',
  number: '',
  user: '',
  statu: ''
})

function addEvent(map) {
  sourceAdd = new ol.source.Vector({})
  layerAdd = new ol.layer.Vector({
    sourceAdd
  })
  map.addLayer(layerAdd)
  //创建地图点击事件
  keyAdd = map.on('click', function (e) {
    // 获取坐标后调用添加点要素函数
    dialogVisible3.value = true

    lnglat = e.coordinate
    addPoint1(lnglat[0], lnglat[1])
  })
}

function addPoint1(x, y) {
  //创建一个点形状，描述点形状的几何信息
  var gpoint = new Zondy.Object.GPoint(x, y)
  //设置当前点要素的几何信息
  var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] })
  var pointInfo = new Zondy.Object.CPointInfo({
    Angle: 0,
    Color: 6,
    Space: 0,
    SymHeight: 5,
    SymID: 21, //子图号 都是默认的
    SymWidth: 5
  })
  //描述点要素的符号参数信息

  //设置当前点要素的图形参数信息
  var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
    InfoType: 1,
    PntInfo: pointInfo
  })
  var addValue = []
  //设置添加点要素的属性信息
  for (var value in addEventForm) {
    addValue.push(addEventForm[value])
  }

  var attValue = addValue

  var feature = new Zondy.Object.Feature({
    fGeom: fGeom,
    GraphicInfo: webGraphicInfo,
    AttValue: attValue
  })
  //设置要素为点要素
  feature.setFType(1)
  //创建一个要素数据集
  var featureSet = new Zondy.Object.FeatureSet()
  //设置属性结构
  //设置属性结构
  var cAttStruct = new Zondy.Object.CAttStruct({
    FldName: [
      '事件编号',
      '事件类型',
      '事件等级',
      '发生时间',
      '发生地点',
      '车牌号',
      '驾驶员',
      '处理状态'
    ],
    FldNumber: 8,
    FldType: [
      'string',
      'string',
      'int',
      'string',
      'string',
      'string',
      'string',
      'int'
    ]
  })
  featureSet.AttStruct = cAttStruct
  //添加要素到要素数据集
  featureSet.addFeature(feature)
  var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
    ip: 'localhost',
    port: '6163' //访问IGServer的端口号，.net版为6163，Java版为8089
  })
  //执行添加点要素功能
  editService.add(featureSet, onPntSuccess)
  //添加点要素回调函数
  function onPntSuccess(data) {
    if (data.succeed) {
      alert('添加成功')

      dialogVisible3.value = false
      map.removeLayer(layerAdd)
      sourceAdd.clear()
    } else {
    }
  }
}

// 点要素的符号参数信息函数
function addPointStyle(sloveType) {
  // sloveTyp代表处理状态，0为未处理，1为处理中，2 为已归档
  let Color = ''
  if (sloveType == 0) {
    Color = 6
  } else if (sloveType == 1) {
    Color = 4
  } else {
    Color = 90
  }
  let pointInfo = new Zondy.Object.CPointInfo({
    Angle: 0,
    Color: Color,
    Space: 0,
    SymHeight: 5,
    SymID: 21, //子图号 都是默认的
    SymWidth: 5
  })
  return pointInfo
}
function stopAddEvent(map) {
  ol.Observable.unByKey(keyAdd)
}

// ---------------------------查询事件-----------------------------
var sourceEvent
var layerEvent
var keySearch
var drawcircle
const queryEventData = reactive([])
const dialogVisible1 = ref(false)
function handleClose1() {
  dialogVisible1.value = false
  sourceEvent.clear()
  map.removeLayer(layerEvent) //移除查询标注图层

  queryEventData.value = []
}
function queryEvent(map) {
  // 定义全局视频监控图层，方便方法调用
  sourceEvent = new ol.source.Vector({ wrapX: false })
  layerEvent = new ol.layer.Vector({
    source: sourceEvent,
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.3, 50],
        anchorOrigin: 'bottom-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //图标缩放比例
        scale: 0.3,
        //透明度
        opacity: 1,
        //图标的url
        src: '../../../src/assets/images/event.png'
      })
    })
  })

  /**
   * 事件查询的周边查询
   */
  eventQueryVecLayerByCircle()
  function eventQueryVecLayerByCircle() {
    //实例化交互绘制类对象并添加到地图容器中
    drawcircle = new ol.interaction.Draw({
      type: 'Circle'
    })
    map.addInteraction(drawcircle)
    //点击查询的回调函数
    keySearch = drawcircle.on('drawend', eventQueryVecLayerCallback)
  }

  /**
   * 事件查询的周边查询
   * @param {object} feature 要素数据对象
   */
  function eventQueryVecLayerCallback(feature) {
    //初始化查询结构对象，设置查询结构包含几何信息
    var queryStruct = new Zondy.Service.QueryFeatureStruct()
    //是否包含几何图形信息
    queryStruct.IncludeGeometry = true
    //是否包含属性信息
    queryStruct.IncludeAttribute = true
    //是否包含图形显示参数
    queryStruct.IncludeWebGraphic = false
    //创建一个用于查询的点
    var geomObj = new Zondy.Object.Circle()
    // 将 openlayers 的点几何转换为 MapGIS 的点几何
    geomObj.setByOL(feature.feature.values_.geometry)
    //指定查询规则
    var rule = new Zondy.Service.QueryFeatureRule({
      //是否将要素的可见性计算在内
      EnableDisplayCondition: false,
      //是否完全包含
      MustInside: false,
      //是否仅比较要素的外包矩形
      CompareRectOnly: false,
      //是否相交
      Intersect: true
    })
    //实例化查询参数对象
    var queryParam = new Zondy.Service.QueryParameter({
      geometry: geomObj,
      resultFormat: 'json',
      struct: queryStruct,
      rule: rule
    })
    //设置查询分页号
    queryParam.pageIndex = 0
    //设置查询要素数目
    queryParam.recordNumber = 1000
    //实例化地图文档查询服务对象
    var queryService = new Zondy.Service.QueryDocFeature(
      queryParam,
      'guanggu',
      2,
      {
        ip: 'localhost',
        port: '6163'
      }
    )

    //执行查询操作，querySuccess 为查询回调函数
    queryService.query(eventQueryVecLayerSuccess, eventQueryVecLayerError)
  }
  function eventQueryVecLayerError() {
    console.log(e)
  }
  /**
   * 事件查询的周边查询成功回调函数
   * @param {object} result 查询成功的结果对象
   */
  function eventQueryVecLayerSuccess(result) {
    //关闭进度条
    console.log(dialogVisible1)
    dialogVisible1.value = true
    //停止进度条
    //初始化Zondy.Format.PolygonJSON类
    var format = new Zondy.Format.PolygonJSON()
    //将MapGIS要素JSON反序列化为ol.Feature类型数组
    var features = format.read(result)
    sourceEvent.addFeatures(features)
    /* 将查询到的要素标注显示， */
    map.addLayer(layerEvent)
    features.forEach((item) => {
      // 遍历获取时间，数组格式化处理
      queryEventData.push({
        eventNum: item.values_.values_.事件编号,
        eventType: item.values_.values_.事件类型,
        eventLevel: item.values_.values_.事件等级,
        eventTime: item.values_.values_.发生时间,
        eventPlace: item.values_.values_.发生地点,
        cartNum: item.values_.values_.车牌号,
        driver: item.values_.values_.驾驶员,
        sloveState: item.values_.values_.处理状态
      })
    })
  }
}
function stopSearch(map) {
  ol.Observable.unByKey(keySearch)
  map.removeLayer(layerEvent)
  sourceEvent.clear()
  map.getOverlays().clear()
  map.removeInteraction(drawcircle)
}
</script>

<style scoped>
.header-top {
  float: left;
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.header-top .logo {
  font-size: 20px;
  font-weight: 700;
  padding: 0 15px;
  color: #202124;
}
.el-menu {
  border: none;
  width: 880px;
}
.header-top .el-input {
  width: 300px;
  margin: 0 30px 0 -100px;
}
.el-dropdown-link {
  cursor: pointer;
}

/* 报告路况的弹框 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-form-item__content {
  width: 300px !important;
  flex: none !important;
}
.el-form-item .el-form-item {
  margin: 20px 0 0 0;
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 300px !important;
}

/* --------------popup弹窗------------------- */
/* popup弹窗 */
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 0px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 45px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: '✖';
}

#popup-content {
  padding: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  font-family: '微软雅黑';
}
#popup-content > h5 {
  background: #2196f3;
}

.test {
  display: inline-block;
  border: 2px solid rgb(189, 181, 181);
}

.notice-button {
  height: 33px;
  width: 87px;
  margin-right: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.notice-search {
  background-color: #67c23a;
}
.notice-reset {
  background-color: #e6a23c;
}

/* --------------popup弹窗------------------- */
/* popup弹窗 */
.S_ol-popup {
  min-width: 130px;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 45px;
  left: -50px;
}

.S_ol-popup:after,
.S_ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.S_ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.S_ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.S_ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 11px;
  right: 15px;
}

.S_ol-popup-closer:after {
  content: '✖';
}

#S_popup-content {
  font-size: 14px;
  font-family: '微软雅黑';
}
.S_ol-popup > h5 {
  box-sizing: border-box;
  width: 250px;
  height: 25px;
  background-color: #2196f3;
  line-height: 25px;
  padding-left: 10px;
  margin: 0;
  color: #fff;
}
#S_popup-content table {
  width: 250px;
  border-collapse: collapse;
  text-align: center;
  border-color: #cccccc;
}
#S_popup-content table tr {
  height: 25px;
}
</style>

<style>
.el-sub-menu__title {
  padding: 0 17px !important;
}
</style>
